<template> 
  <div class="app-container">
    <el-card  class="form-container" shadow="never">
        <el-form :model="introduceInfo" ref="introduceForm" :rules="introduceRules" label-width="120px" style="width: 740px" size="small">
           <el-form-item label="商家logo：" prop="logo">
              <single-upload v-model="introduceInfo.logo"></single-upload>
            </el-form-item>
            <el-form-item label="联系人二维码：" prop="linkmanCode">
              <single-upload v-model="introduceInfo.linkmanCode"></single-upload>
            </el-form-item>
            <el-form-item label="小程序个人中心背景图：" prop="backgroundImg">
              <single-upload v-model="introduceInfo.backgroundImg"></single-upload>
            </el-form-item>
            <el-form-item label="小程序名字：" prop="appletName">
                <el-input v-model="introduceInfo.appletName"></el-input>
            </el-form-item>
            <el-form-item label="联系电话：" prop="phone">
                <el-input v-model="introduceInfo.phone"></el-input>
            </el-form-item>
            <el-form-item label="所在地址：" prop="address">
                <el-input v-model="introduceInfo.address"></el-input>
            </el-form-item>
            <el-form-item label="纬度：" prop="localX">
                <el-input v-model="introduceInfo.localX"></el-input>
            </el-form-item>
            <el-form-item label="经度：" prop="localY">
                <el-input v-model="introduceInfo.localY"></el-input>
            </el-form-item>
            <el-form-item label="营业时间：" prop="businessHours">
                <el-input v-model="introduceInfo.businessHours"></el-input>
            </el-form-item>
            <el-form-item label="提供服务：" prop="tags">
                <el-input v-model="introduceInfo.tags" placeholder="多种服务，请用逗号隔开"></el-input>
            </el-form-item>
            <el-form-item label="商户介绍：">
                <tinymce :width="618" :height="300" v-model="introduceInfo.context"></tinymce>
            </el-form-item>
            <el-form-item style="text-align: center">
                <el-button type="primary" size="medium" @click="save">保存</el-button>
                <!-- <el-button type="warning" size="medium" @click="reset">清空</el-button> -->
            </el-form-item>
        </el-form>
    </el-card>
  </div>
</template>
<script>
  import {validatPhone, validatMobile} from '@/utils/validate';
  import {getIntro, updateIntro} from '@/api/business';
  import Tinymce from '@/components/Tinymce';
  import SingleUpload from '@/components/Upload/singleUpload'

  export default {
    name: 'introduceIndex',
    components: {Tinymce,SingleUpload},
    data() {
      const validatePhone = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入正确的手机号'))
        } else if (validatPhone(value) || validatMobile(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的手机号'))
        }
      };
      return {
        introduceInfo: {
          logo: null,
          linkmanCode:null,
          appletName:null,
          backgroundImg:null,
          phone: null,
          address: null,
          localX: null,
          businessHours: null,
          tags: null,
          context: null
        },
        introduceRules: {
          phone: [{required: true, trigger: 'blur', validator: validatePhone}],
          address: [{required: true, trigger: 'blur', message: '请输入所在地址'}],
          localX: [{required: true, trigger: 'blur', message: '请输入所在纬度'}],
          localY: [{required: true, trigger: 'blur', message: '请输入所在经度'}],
          businessHours: [{required: true, trigger: 'blur', message: '请输入营业时间'}],
          tags: [{required: true, trigger: 'blur', message: '请输入服务项目'}],
          logo: [
            {required: true, message: '请选择logo图片', trigger: 'blur'}
          ],
          linkmanCode: [
            {required: true, message: '请选择二维码图片', trigger: 'blur'}
          ],
          backgroundImg: [
            {required: true, message: '请选择背景图', trigger: 'blur'}
          ],
          appletName: [
            {required: true, message: '请输入小程序名字', trigger: 'blur'}
          ],
        }
      }
    },
    created() {
      this.getIntroduceInfo();
    },
    methods: {
      getIntroduceInfo() {
        getIntro().then(response => {
          this.introduceInfo = response.data;
        });
      },
      save() {
          updateIntro(this.introduceInfo).then(response => {
            // localStorage.setItem('logo', this.introduceInfo.logo);
            this.$message({ type: 'success', message: '保存成功', duration:1000 });
            location.reload()
          });
      }
    }
  }
</script>
<style scoped>
  .form-container {
    width: 850px;
  }
</style>


